<template>
    <view
        class="fixed bg-navbar w-full px-16 box-border flex-justifyBetween-itemsCenter-box z-10 text-primary bg-primary"
        :style="{
            'height': `${navHeight - 10}px`,
            'padding-top': `${statusBarHeights - 8}px`
        }"
    >
        <!-- 返回按钮 -->
        <template v-if="isNeedBack">
            <view class="w-3">
                <text class="iconfont icon-fanhui text-600 fz-14 text-default mr-12" @click="back"/>
            </view>
        </template>
        <!-- 其他页面 -->
        <view :class="['w-3', isNeedBack ? 'text-center': '']">
            <template v-if="custom">
                <slot name="title"/>
            </template>
            <template v-else>
                <text class="fz-14 text-default">{{ title }}</text>
            </template>
        </view>
        <view class="w-3"/>
    </view>
    <view class="w-full bg-white" :style="{'height': `${navHeight - 10}px`}"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

defineProps({
	// 是否自定义 NavBar 内容
	custom: {
		type: Boolean,
		default: false
	},
	// 是否需要返回按钮
	isNeedBack: {
		type: Boolean,
		default: true
	},
	// 导航标题
	title: {
		type: String,
		default: ''
	}
})

// 状态栏高度
const statusBarHeights = ref(0)

// 整体顶部导航栏的高度
const navHeight = ref(0)

onLoad(() => {
	getStatusHeight()
})

// 返回上一页
const back = () => {
	uni.navigateBack()
}

// 获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
const getStatusHeight = () => {
	const { statusBarHeight, system } = uni.getSystemInfoSync()
	statusBarHeights.value = statusBarHeight
	navHeight.value = statusBarHeight + (system.indexOf('iOS') > -1 ? 55 : 60)
	uni.setStorageSync('navHeight', navHeight.value)
}
</script>
